<template>
	<div id="app">
		<el-container>
			<el-header>
				<h1>UNI-ADMIN</h1>
				<el-menu
					:default-active="activeIndex"
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-menu-item index="1">首页</el-menu-item>
					<el-menu-item index="2">商品</el-menu-item>
					<el-menu-item index="3">订单</el-menu-item>
					<el-menu-item index="4">会员</el-menu-item>
					<el-menu-item index="5" @click="tui">设置</el-menu-item>
				</el-menu>
			</el-header>
			<div id="app">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/store">商品</a></el-breadcrumb-item>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<router-view></router-view>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeIndex: '1',
			username: '',
			password: ''
		};
	},

	mounted() {},
	methods: {
		tui() {
			this.$router.push('/login');
		},
		handleSelect(key, keyPath) {
			console.log(key, keyPath);
			this.activeIndex = key;
			var path = '';
			switch (key) {
				case '1':
					path = '/';
					break;
				case '2':
					path = '/store';
					break;
				case '3':
					path = '/order';
					break;
				case '4':
					path = '/vip';
					break;
				case '5':
					path = '/setting';
					break;
				default:
					break;
			}
			this.$router.push(path);
		}
	}
};
</script>

<style lang="scss" scoped>
#app {
	.el-header {
		background-color: rgb(84, 92, 100);
		color: white;
		display: flex;
		justify-content: space-between;

		h1 {
			width: 150px;
		}
	}

	body > .el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.el-col {
		text-align: center;
	}
}
</style>
